<template>
  <div style=" width: 97%; margin: auto;padding-top: 50px;">
    <el-row>
      <el-col :span="16">
        <h3>理事会、监事成员情况</h3>
      </el-col>
      <el-col :span="8" style="text-align: right;">
        <el-button  size="default" style="width: 100px;" type="primary" @click="addList()">增加</el-button>
      </el-col>
    </el-row>
    <el-form :model="listForm" ref="listFormRef">
      <el-row>
        <el-col :span="24">
          <el-table
            :header-cell-style="{background: '#F0F5FA',color: '#333333'}"
             size="default"
            :data="listForm"
            border>
            <el-table-column prop="directorName" label="姓名" align="center" width="110px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorName'" :rules="listRules.directorName">
                <el-input v-model="scope.row.directorName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorAge" label="年龄" align="center" width="90px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorAge'" :rules="listRules.directorAge">
                <el-input type="number" v-model="scope.row.directorAge" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorSex" label="性别" align="center" width="100px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorSex'" :rules="listRules.directorSex">
                <el-select clearable  v-model="scope.row.directorSex" placeholder="请选择" style="width: 100%;">
                  <el-option
                    v-for="dict in sexOptions"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorPolitics" label="政治面貌" align="center" width="110px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorPolitics'" :rules="listRules.directorPolitics">
                <el-select clearable  v-model="scope.row.directorPolitics" placeholder="请选择" style="width: 100%;">
                  <el-option
                    v-for="dict in politicsOptions"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="legalRepresentative" label="是否为法人" align="center" width="110px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].legalRepresentative'" :rules="listRules.legalRepresentative">
                <el-select clearable  v-model="scope.row.legalRepresentative" placeholder="请选择" style="width: 100%;">
                  <el-option
                    v-for="dict in shiOptions"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorPositionType" label="社会组织职务" align="center" width="110px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorPositionType'" :rules="listRules.directorPositionType">
                <el-input v-model="scope.row.directorPositionType" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorPositionName" label="具体职务" align="center" width="110px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorPositionName'" :rules="listRules.directorPositionName">
                <el-input v-model="scope.row.directorPositionName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorType" label="人员类型" align="center" width="110px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorType'" :rules="listRules.directorType">
                  <el-select clearable  v-model="scope.row.directorType" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="dict in directorTypeOptions"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="isRetire" label="是否退休" align="center" width="110px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].isRetire'" :rules="listRules.isRetire">
                <el-select clearable  v-model="scope.row.isRetire" placeholder="请选择" style="width: 100%;">
                  <el-option
                    v-for="dict in shiOptions"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorUnitPosition" label="原单位" align="center" width="150px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorUnitPosition'" :rules="listRules.directorUnitPosition">
                <el-input v-model="scope.row.directorUnitPosition" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="leadingCadres" label="是否为党政机关领导干部" align="center" width="150px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].leadingCadres'" :rules="listRules.leadingCadres">
                <el-select clearable  v-model="scope.row.leadingCadres" placeholder="请选择" style="width: 100%;">
                  <el-option
                    v-for="dict in shiOptions"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorPhone" label="手机号" align="center" width="150px">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorPhone'" :rules="listRules.directorPhone">
                  <el-input type="number" v-model="scope.row.directorPhone" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="80">
              <template #default="scope">
                <el-button type="text"  size="default" @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>


  </div>
</template>
<script>
import { getDictByCode, getTableInfoByPage, stSaveSupervisory } from '@/views/yearCheck/ykb/st/st'
export default {
  data() {
    return {
      politicsOptions:undefined,
      handleOptions:undefined,
      sexOptions: [{id: "1", name: '男'}, {id: "2", name: '女'}],
      shiOptions: [{id: "1", name: '是'}, {id: "2", name: '否'}],
      directorTypeOptions: [{id: 6, name: '理事'},{id: 8, name: '监事'}],
      addDialog: false,
      tableForm: {
        id:'',
        creditCode: localStorage.getItem("creditCode"),
        examineYear: localStorage.getItem("examineYear"),//审查年度
        organizationBaseId:'1',
        directorName: '',//姓名
        directorAge: '',//年龄
        directorSex: "",//性别1-男，2-女 0-未知
        directorPolitics: '',//政治面貌
        legalRepresentative: "",//是否为法人 0-未知、1-是 2-否
        directorType: '',//人员类型
        directorPositionType: '',//社会组织职务
        directorPositionName: '',//具体职务
        directorFullTime: '',//专职/兼职
        directorUnitPosition: '',//单位及职务/原单位/社会组织职务
        directorPhone:'',//手机号
        isRetire:'',//是否退休
        leadingCadres: ''//是否为党政机关领导干部 0-未知、1-是 2-否
      },
      listForm: [],
      // tableRules: {
      //   directorName:[{ required: true, message: '请完善', trigger: 'blur' }],
      //   directorAge:[{ required: true, message: '请完善', trigger: 'blur' }],
      //   directorSex: [{ required: true, message: '请选择', trigger: 'blur' }],
      //   directorPolitics:[{ required: true, message: '请选择', trigger: 'blur' }],
      //   legalRepresentative:[{ required: true, message: '请选择', trigger: 'blur' }],
      //   directorType: [{ required: true, message: '请选择', trigger: 'blur' }],
      //   directorPositionType: [{ required: true, message: '请完善', trigger: 'blur' }],
      //   directorPositionName: [{ required: true, message: '请完善', trigger: 'blur' }],
      //   directorFullTime:[{ required: true, message: '请选择', trigger: 'blur' }],
      //   directorUnitPosition: [{ required: true, message: '请完善', trigger: 'blur' }],
      //   leadingCadres: [{ required: true, message: '请选择', trigger: 'blur' }],
      // },
      listRules:{
        directorName:[{ required: true, message: '请完善', trigger: 'blur' }],
        directorAge:[{ required: true, message: '请完善', trigger: 'blur' }],
        directorSex: [{ required: true, message: '请选择', trigger: 'blur' }],
        directorPolitics:[{ required: true, message: '请选择', trigger: 'blur' }],
        legalRepresentative:[{ required: true, message: '请选择', trigger: 'blur' }],
        directorType: [{ required: true, message: '请选择', trigger: 'blur' }],
        directorPositionType: [{ required: true, message: '请完善', trigger: 'blur' }],
        directorPositionName: [{ required: true, message: '请完善', trigger: 'blur' }],
        directorFullTime:[{ required: true, message: '请选择', trigger: 'blur' }],
        directorUnitPosition: [{ required: true, message: '请完善', trigger: 'blur' }],
        leadingCadres: [{ required: true, message: '请选择', trigger: 'blur' }],
      }
    };
  },
  created() {

  },
  methods: {
    getPolitics(id) {
      console.log(this.politicsOptions);
      for (let i = 0; i < this.politicsOptions.length; i++) {
        console.log(this.politicsOptions[i].id + '    ' + id);
        if (this.politicsOptions[i].id == id) {
          return this.politicsOptions[i].name;
        }
      }
      return id;
    },
    getInfo() {
      getDictByCode("unitNature").then(response => {
        this.unitNatureOptions = response.data;
      });
      getDictByCode("county").then(response => {
        this.countyOptions = response.data;
      });
      getDictByCode("politics").then(response => {
        this.politicsOptions = response.data;
      });
      getTableInfoByPage(25).then(response => {
        this.listForm = JSON.parse(JSON.stringify(response.data).replace(/null/g, '""'));
        if(this.listForm == null || this.listForm == ''){
          this.listForm = [];
        }
        for (let i = 0; i < this.listForm.length; i++) {
          this.listForm[i].directorSex +="";
          this.listForm[i].legalRepresentative +="";
          this.listForm[i].leadingCadres +="";
          this.listForm[i].isRetire +="";

        }
        console.log(this.listForm)
      });
    },
    addList() {
      this.addDialog = false;
      this.listForm.push(Object.assign({}, this.tableForm));
    },
    postInfo() {
      for (let i = 0; i < this.listForm.length; i++) {
        this.listForm[i].creditCode = localStorage.getItem("creditCode");
        this.listForm[i].examineYear = localStorage.getItem("examineYear");
      }
      this.$refs.listFormRef.validate(valid=> {
        if(valid){
          stSaveSupervisory(this.listForm).then(response => {
            this.$message({
              message: '保存理事会、监事成员成功',
              type: 'success'
            });
            this.getInfo();
          });
        }else{
          this.$message({
            message: '请填写完整！',
            type: 'error'
          });
        }
      });

    },
    handleDelete(index) {
      this.listForm.splice(index, 1);
    },
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}
.el-form-item {
  margin-bottom: 0px;
}
</style>

